<template>
  <view>
    <uni-popup ref="popupWrongAnswerDialog" type="bottom" :safe-area="false" :mask-click="true" @maskClick="quit">
      <view class="container align-center flex-col">
        <view class="title">{{ title }}</view>
        <view class="img-top" src="https://down.qwdata.vip/app_icon/wrong_answer_top.png"></view>
        <view class="flex-col bottom-container">
          <text class="price" v-if="canPay">{{ productBottomTips(mainProduct) }}</text>
          <view class="unlock center" @click="toPay" v-if="canPay">解锁试题详解</view>
          <view class="unlock center" @click="toJihuo" v-else>解锁试题详解</view>
          <text class="cancel" @click="quit">坚持退出</text>
          <view class="protocol-container">
            <text class="title1">成为会员即表示同意</text>
            <text class="title2" @click="toVip">《驾考会员协议》</text>
          </view>
        </view>
        <Pay ref="pay" @success="onPaySuccess"></Pay>
      </view>
    </uni-popup>
    <VIPQuanyiDialog ref="VIPQuanyiDialog" @finish="close"></VIPQuanyiDialog>
  </view>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import Pay from "@/components/Pay.vue";
import {commonApi} from "@/api";
import VIPQuanyiDialog from "@/components/VIPQuanyiDialog.vue";

export default {
  name: "WrongAnswerDialog",
  components: {VIPQuanyiDialog, Pay},
  data() {
    return {
      count: 0,
      title: '',
      kemu: null,
      isManfen: false,
      isShowed: false,
    }
  },
  computed: {
    ...mapGetters(['mainProduct', 'canPay', 'isKemu1VIP', 'isKemu2VIP', 'isKemu3VIP', 'isKemu4VIP']),
    kemuVIP() {
      if (this.kemu === 1) {
        return this.isKemu1VIP
      }
      if (this.kemu === 2) {
        return this.isKemu2VIP
      }
      if (this.kemu === 3) {
        return this.isKemu3VIP
      }
      if (this.kemu === 4) {
        if (this.isManfen) {
          return this.isKemu4VIP || this.isKemu1VIP
        } else {
          return this.isKemu4VIP
        }
      }
      return false
    }
  },
  methods: {
    ...mapActions(['refreshUser']),
    isShowing() {
      return this.isShowed
    },
    isVIPQuanyiDialogShowing() {
      if (this.$refs.VIPQuanyiDialog && this.$refs.VIPQuanyiDialog.isShowing()) {
        return true
      } else {
        return false
      }
    },
    closeVIPQuanyiDialog() {
      //要关闭VIPQuanyiDialog弹框，如果它没有显示（这种情况一般不会出现，为了容错就把WrongAnswerDialog关闭）
      if (this.isVIPQuanyiDialogShowing()) {
        this.$refs.VIPQuanyiDialog.finish()
      } else {
        this.close()
      }
    },
    open(title, kemu, isManfen) {
      // console.log('hsf', 'isManfen:' + isManfen)
      if (isManfen) {
        this.isManfen = true
      }
      this.title = title
      this.kemu = parseInt(kemu)
      // console.log(title, kemu, this.kemuVIP, this.isKemu1VIP)
      if (this.kemuVIP) {
        return
      }
      this.$refs.popupWrongAnswerDialog.open('bottom')
      this.isShowed = true
    },
    quit() {
      this.$refs.VIPQuanyiDialog.forcedOpen()
    },
    close() {
      this.$refs.popupWrongAnswerDialog.close()
      this.isShowed = false
    },
    toVip() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=vip',
      });
    },
    async toPay() {
      this.$refs.pay.open({mode: 'product', from: 'vip', product: this.mainProduct})
    },
    onPaySuccess() {
      this.refreshUser()
      this.$refs.popupWrongAnswerDialog.close()
      this.isShowed = false
    },
    productBottomTips(product) {
      let day = 0

      let perDay = 0

      if (product.vipDayUnit === 1) {
        perDay = 30
      } else if (product.vipDayUnit === 2) {
        perDay = 1
      } else if (product.vipDayUnit === 3) {
        perDay = 365
      }
      day = perDay * product.vipDayCount
      let num = (Math.floor(product.fenPrice / day) / 100)
      if (num < 0.01) {
        num = 0.01
      }
      let str = day + '天'
      if (product.vipDayUnit === 3 && product.vipDayCount === 99) {
        str = '终身会员'
      }

      return '立即开通会员' + str + '，每天仅需' + num + '元'
    },
    toJihuo() {
      uni.showModal({
        title: '输入激活码',
        editable: true,
        success: async (e) => {
          if (e.cancel) {
            return
          }
          console.log(e)
          if (!e.content || e.content.length < 5) {
            uni.showToast({
              icon: 'none',
              title: '请输入有效激活码'
            })
            return
          }
          try {
            await commonApi.activeVIP(e.content.trim())
            await this.refreshUser()
            this.$refs.popupWrongAnswerDialog.close()
            this.isShowed = false
            uni.showToast({
              title: '激活成功！', icon: 'none', duration: 2000, mask: true
            })
          } catch (e) {
            uni.showToast({
              icon: 'none',
              title: e.message || '激活失败！'
            })
          }
        }
      })
    },
  }
}
</script>

<style scoped lang='scss'>
.container {
  background-color: #fff;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  background-image: url("https://down.qwdata.vip/app_icon/wrong_answer_bj.png");
  background-size: cover;
  background-position: top;
  padding-top: 40rpx;

  .title {
    font-size: 24px;
    font-weight: bold;
  }

  .img-top {
    width: 704rpx;
    height: 400rpx;
    background-image: url("https://down.qwdata.vip/app_icon/wrong_answer_top.png");
    background-size: cover;
    background-position: bottom;
  }

  .bottom-container {
    width: 100vw;
    bottom: 24upx;

    .price {
      font-size: 14px;
      color: #F56F56;
      margin-top: 15rpx;
      text-align: center;
    }

    .unlock {
      height: 92upx;
      margin-top: 26upx;
      margin-left: 36upx;
      margin-right: 36upx;
      border-radius: 46upx;
      background-image: linear-gradient(to right, rgb(42, 42, 42), rgb(25, 26, 31));
      font-size: 17px;
      color: rgb(246, 203, 177);
      font-weight: bold;
    }

    .cancel {
      font-size: 17px;
      color: #999;
      height: 100rpx;
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .protocol-container {
      margin-top: 10rpx;
      margin-bottom: 30rpx;
      text-align: center;

      .title1 {
        font-size: 22upx;
        color: #B1B1B1;
      }

      .title2 {
        font-size: 22upx;
        color: #5A5A5A;
      }
    }
  }
}
</style>
